<template>
  <transition name="confirm-fade">
    <div class="confirm" v-show="layerHide" @click.stop>
      <div class="confirm-wrapper">
        <div class="confirm-content">
          <p class="text">{{text}}</p>
          <div class="operate">
            <div class="operate-btn left" @click="falseBtnFn">{{falseBtnTxt}}</div>
            <div class="operate-btn" @click="trueBtnFn">{{trueBtnTxt}}</div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: 'Confirm',
    props: {
      //是否一开始显示弹层
      layerShow: {
        types: Boolean,
        default: false
      },
      //文本文字
      text: {
        types: String,
        default: ''
      },
      //确定文字
      trueBtnTxt: {
        types: String,
        default: '确定'
      },
      //取消文字
      falseBtnTxt: {
        types: String,
        default: '取消'
      },
      //是否点击按钮时候关闭弹层 默认关闭
      layerBtn: {
        types: Boolean,
        default: true
      },
    },
    data() {
      return {
        layerHide: this.layerShow
      }
    },
    methods: {
      show() {
        this.layerHide = true
      },
      hide() {
        this.layerHide = false
      },
      falseBtnFn() {
        if (this.layerBtn) {
          this.hide()
        }
        this.$emit('falseBtnFne')
      },
      trueBtnFn() {
        if (this.layerBtn) {
          this.hide()
        }
        this.$emit('trueBtnFne')
      }
    }
  }

</script>
